<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap4.css' %}">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url('{% static "users/background.jpg" %}');
            background-size: cover;
            background-position: center;
        }
        .container {
            margin-top: 100px;
            position: relative;
            z-index: 1;
        }
        .form-container {
            background-color: rgba(31, 31, 31, 0.8);
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
        }
        .form-container label {
            color: #fff;
 font-weight: bold;
        }
        .form-container input[type="text"],
        .form-container input[type="password"] {
            background-color: transparent;
            border: none;
            border-bottom: 1px solid #fff;
            color: #fff;
            outline: none;
            margin-bottom: 20px;
        }
        .-container input[type="text"]::placeholder,
        .form-container input[type="password"]::placeholder {
            color: #ccc;
        }
        .form-container input[type="submit"] {
            background-color: #007bff;
            border: none;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
        .form-container input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .title {
            color: #fff;
        }
    </style>
</head>
<body>
<div id="bg"></div>

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="form-container">
                <h1 class="title text-center mb-4">SecurityEye</h1>
                <h5 class="title text-center mb-4">Login Page</h5>
                <hr>
                <form id="loginForm" action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        {{ form.as_p }}
                    </div>
                    <a href="{% url 'users:forget_pwd' %}" class="float-right small">Forgot Password?</a>
                    <div class="clearfix"></div>
                    <button type="submit" class="btn btn-primary btn-block mt-4">Login</button>
                </form>
                <div class="text-center mt-3">
                    <p style="color: #fff;">Don't have an account? <a href="{% url 'users:register' %}">Sign up here</a>.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'js/particles.js' %}"></script>
{#<script>#}
{#    particlesJS("bg", {#}
{#        "particles": {#}
{#            "number": {#}
{#                "value": 80,#}
{#                "density": {#}
{#                    "enable": true,#}
{#                    "value_area": 800#}
{#                }#}
{#            },#}
{#            "color": {#}
{#                "value": "#ffffff"#}
{#            },#}
{#            "shape": {#}
{#                "type": "circle",#}
{#                "stroke": {#}
{#                    "width": 0,#}
{#                    "color": "#000000"#}
{#                },#}
{#                "polygon": {#}
{#                    "nb_sides": 5#}
{#                },#}
{#                "image": {#}
{#                    "src": "img/github.svg",#}
{#                    "width": 100,#}
{#                    "height": 100#}
{#                }#}
{#            },#}
{#            "opacity": {#}
{#                "value": 0.5,#}
{#                "random": false,#}
{#                "anim": {#}
{#                    "enable": false,#}
{#                    "speed": 1,#}
{#                    "opacity_min": 0.1,#}
{#                    "sync": false#}
{#                }#}
{#            },#}
{#            "size": {#}
{#                "value": 3,#}
{#                "random": true,#}
{#                "anim": {#}
{#                    "enable": false,#}
{#                    "speed": 40,#}
{#                    "size_min": 0.1,#}
{#                    "sync": false#}
{#                }#}
{#            },#}
{#            "line_linked": {#}
{#                "enable": true,#}
{#                "distance": 150,#}
{#                "color": "#ffffff",#}
{#                "opacity": 0.4,#}
{#                "width": 1#}
{#            },#}
{#            "move": {#}
{#                "enable": true,#}
{#                "speed": 6,#}
{#                "direction": "none",#}
{#                "random": false,#}
{#                "straight": false,#}
{#                "out_mode": "out",#}
{#                "bounce": false,#}
{#                "attract": {#}
{#                    "enable": false,#}
{#                    "rotateX": 600,#}
{#                    "rotateY": 1200#}
{#                }#}
{#            }#}
{#        },#}
{#        "interactivity": {#}
{#            "detect_on": "canvas",#}
{#            "events": {#}
{#                "onhover": {#}
{#                    "enable": true,#}
{#                    "mode": "repulse"#}
{#                },#}
{#                "onclick": {#}
{#                    "enable": true,#}
{#                    "mode": "push"#}
{#                },#}
{#                "resize": true#}
{#            },#}
{#            "modes": {#}
{#                "grab": {#}
{#                    "distance": 400,#}
{#                    "line_linked": {#}
{#                        "opacity": 1#}
{#                    }#}
{#                },#}
{#                "bubble": {#}
{#                    "distance": 250,#}
{#                    "size": 0,#}
{#                    "duration": 2,#}
{#                    "opacity": 0,#}
{#                    "speed": 3#}
{#                },#}
{#                "repulse": {#}
{#                    "distance": 200,#}
{#                    "duration": 0.4#}
{#                },#}
{#                "push": {#}
{#                    "particles_nb": 4#}
{#                },#}
{#                "remove": {#}
{#                    "particles_nb": 2#}
{#                }#}
{#            }#}
{#        },#}
{#        "retina_detect": true#}
{#    });#}
{#</script>#}
</body>
</html>